<template>
  <div>
    <div class="header">
      <div @click="$router.push({name:'AddAddress'})">
          <a-icon type="left" />
      </div>
      <div>
          <h1>选择地址</h1>
      </div>
    </div>
    <div class="city_search">
      <a-input-search
        placeholder="小区/学校/其他..."
        enter-button
        v-model="search_val"
      />
      <!-- <a-input placeholder="小区/公司/学校..." v-model="search_val">
            <a-icon slot="prefix" type="search"></a-icon>
          </a-input> -->
    </div>
    <!-- 搜索结果 -->
    <div class="area">
      <ul class="area_list" v-for="(item, index) in areaList" :key="index">
        <li @click="selectAddress(item)">
          <h4>{{ item.name }}</h4>
          <p>{{ item.district }} {{ item.address }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {

  data() {
    return {
      search_val: "",
      areaList: [],
      city: "",
    };
  },
  //获取tempAddress
  computed:{
      tempAddress(){
          return this.$store.getters.tempAddress;
      }
  },
  methods: {
    searchPlace() {
      const self = this;
      //输入提示插件
      AMap.plugin("AMap.Autocomplete", function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: self.city,
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(self.search_val, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据,把搜索到的数据tips保存到areaList中
          //   console.log(result)
          self.areaList = result.tips;
        });
      });
    },
    selectAddress(item){
        if(item){
            // 点击时添加到临时数组tempAddress中
            this.tempAddress.address_location=item.district+item.address+item.name;
            //回到AddAddress页面
            this.$router.push({name:"AddAddress"});
        }
    }
  },
  watch: {
    search_val() {
      this.searchPlace();
    },
  },
};
</script>
<style lang="scss" scoped>
.header{
  align-items: center;
  background-color: #fff;
  box-sizing: border-box;
  color: black;
  padding: 15px;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 2px rgba($color: #ccc, $alpha: 0.1);
  div {
    flex-grow: 1;
   h1 {
      margin: 0px;
      font-size: 1.5rem;
      font-weight: bolder;
    }
  }
}
.city_search {
    padding: 10px 15px;
    background-color: rgb(253, 251, 251);
}
.area {
    margin-top: 15px;
    background: rgb(253, 251, 251);
}
li {
    padding: 10px 15px;
    color: rgb(170, 169, 169);
    border-bottom: 1px solid rgb(230, 230, 230);
}
h4 {
    font-weight: bold;
}
</style>